<template>
  <div class="app-container">
    <template v-if="showCouponPage == true">
      <div class="search-bar">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="业主名">
            <el-input v-model="queryParams.ownName" placeholder="请输入业主名称" />
          </el-form-item>
          <el-form-item label="兑换时间">
            <el-date-picker
              v-model="tempTime"
              :editable="false"
              type="datetimerange"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="截止时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <template #icon>
                <Search />
              </template>
              搜索
            </el-button>
            <el-button @click="handleResetQuery">
              <template #icon>
                <Refresh />
              </template>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-tabs v-model="queryParams.status" class="enter-tabs" @tab-change="handleClick">
        <el-tab-pane label="全部" name=""></el-tab-pane>
        <el-tab-pane label="未核销" :name="1"></el-tab-pane>
        <el-tab-pane label="已核销" :name="2"></el-tab-pane>
        <el-tab-pane label="已过期" :name="3"></el-tab-pane>
        <el-tab-pane label="已结算" :name="4"></el-tab-pane>
      </el-tabs>
      <BasePageTable
        :table-data="tableData"
        :table-columns-data="tableColumnsData"
        :total="total"
        :loading="loading"
        :page-num="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        @handleQuery="changePage"
      >
        <template #index="scope">
          {{ scope.index + 1 }}
        </template>
        <template #type="{ row, name }">
          {{ row.couponStorageVo?.name }}
          <span v-if="row.couponStorageVo?.supportedCategoryName">-</span>
          {{ row.couponStorageVo?.supportedCategoryName }}
          <!-- {{ VOUCHER_TYPE_ENUM_JSON[row.couponStorageVo?.type] }} -->
        </template>
        <template #houseName="{ row, name }">
          <span>
            {{ row.consumerHouseVO?.neighborhood }}
          </span>
          <span style="margin-left: 10px">
            {{ row.consumerHouseVO?.houseNumber }}
          </span>
        </template>
        <template #effectiveValue="{ row, name }">
          {{ effectiveDispose(row.couponStorageVo) }}
        </template>
        <template #status="{ row, name }">
          <el-tag :type="tagStatus[row.status]">
            {{ COUPON_STATUS_LIST[row.status] }}
          </el-tag>
        </template>
        <template #operation="{ row, name }">
          <el-button link type="primary" @click="handleEdit(row, 'look')">查看详情</el-button>
        </template>
      </BasePageTable>
    </template>
    <template v-else>
      <useForm @backTo="useBackTo" :couponData="couponData"></useForm>
    </template>
  </div>
</template>
<script setup>
import listApi from "@/api/coupon/couponList";
import useForm from "../components/useForm/index.vue";
import { VOUCHER_TYPE_ENUM_JSON, COUPON_STATUS_LIST } from "@/enums/coupon/coupon";
const queryParams = reactive({
  claimTimeBeginTime: "",
  claimTimeEndTime: "",
  ownName: "",
  pageNum: 1,
  pageSize: 10,
  status: 1,
});
const tempTime = ref("");
const tagStatus = ref({
  1: "info",
  2: "success",
  3: "warning",
  4: "success",
});
const total = ref(0);
const tableData = ref([]);
const loading = ref(false);
const showCouponPage = ref(true);
const couponData = ref();
const tableColumnsData = ref([
  {
    label: "序号",
    prop: "index",
    align: "center",
    width: 60,
    customSlot: "index",
  },
  {
    prop: "couponStorageVo.type",
    label: "类型",
    showOverflowTooltip: true,
    customSlot: "type", // 自定义插槽名称
  },
  {
    prop: "couponCode",
    label: "券码",
    showOverflowTooltip: true,
  },
  {
    prop: "houseName",
    label: "房屋信息",
    showOverflowTooltip: true,
    customSlot: "houseName", // 自定义插槽名称
  },
  {
    prop: "consumerHouseVO.ownName",
    label: "业主名称",
    showOverflowTooltip: true,
  },
  {
    prop: "consumerHouseVO.mobile",
    label: "联系电话",
    showOverflowTooltip: true,
  },
  {
    prop: "claimTime",
    label: "兑换时间",
    showOverflowTooltip: true,
  },
  {
    prop: "couponStorageVo.amount",
    label: "券额",
    showOverflowTooltip: true,
  },
  {
    prop: "couponStorageVo.effectiveValue",
    label: "有效期",
    showOverflowTooltip: true,
    customSlot: "effectiveValue", // 自定义插槽名称
  },
  {
    prop: "status",
    label: "状态",
    showOverflowTooltip: true,
    customSlot: "status",
  },
  {
    prop: "operation",
    label: "操作",
    width: 100,
    align: "center",
    fixed: "right",
    customSlot: "operation", // 自定义插槽名称
  },
]);

function handleClick() {
  queryParams.pageNum = 1;
  getList();
}
function handleSearch() {
  queryParams.pageNum = 1;
  getList();
}

function handleChange(val) {
  if (val) {
    const [startTime, endTime] = val;
    queryParams.claimTimeBeginTime = startTime;
    queryParams.claimTimeEndTime = endTime;
  } else {
    queryParams.claimTimeBeginTime = "";
    queryParams.claimTimeEndTime = "";
  }
}

function useBackTo() {
  showCouponPage.value = true;
}

function changePage(val) {
  queryParams.pageNum = val.pageNum;
  queryParams.pageSize = val.pageSize;
  getList();
}

function handleEdit(row) {
  console.log(row);
  // let id = row.id;
  // listApi.couponDetail(id).then((res) => {
  //   console.log(res);
  // });
  couponData.value = JSON.parse(JSON.stringify(row));
  showCouponPage.value = false;
}

function effectiveDispose(data) {
  if (!data || data.effectiveValue == undefined) {
    return "-";
  } else if (data.effectiveType == 1) {
    if (data.effectiveValue.day == -1) {
      return "长期有效";
    } else {
      return data.effectiveValue.day + "天";
    }
  } else {
    return data.effectiveValue?.begin + "~" + data.effectiveValue?.end;
  }
}

function getList() {
  loading.value = true;
  listApi
    .pages(queryParams)
    .then((data) => {
      tableData.value = data.list || [];
      console.log(tableData.value);
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}
// 重置查询
function handleResetQuery() {
  queryParams.claimTimeBeginTime = "";
  queryParams.claimTimeEndTime = "";
  tempTime.value = "";
  queryParams.ownName = "";
  queryParams.pageSize = 10;
  queryParams.status = 1;
  queryParams.pageNum = 1;
  getList();
}
onMounted(async () => {
  getList();
});
</script>
